<template>
	<!-- 充值 -->
	<view class="bigbox pt32 pb90">
		<!-- 头部盒子 -->
		<view class="pl10 pr10">
			<!-- 头部tit盒子 -->
			<view class="headerbox-tit">
				选择充值金额
			</view>
			<!-- 头部tit盒子 -->

			<!-- 选择金额盒子 -->
			<view class="selectbox flex flex-wrap row-between">
				<!-- 每一项盒子 -->
				<view class="selectbox-item mt26 " v-for="(item,index) in rechargeList" :key="index" :class="money == item.price ? 'active' : ''" @tap="money = item.price">
					{{item.price}}
				</view>
				
			</view>
			<!-- 选择金额盒子 -->
		</view>

		<view class="mt40">
			<u-field 
			v-model="money" 
			label="自定义金额：" 
			placeholder="请输入提现金额" 
			label-width='200'
			type='number'
			input-align='right'
			:border-bottom='false'/>
		</view>
		
		<!-- 线条盒子 -->
		<view class="line mt42 mb20"></view>
		<!-- /线条盒子 -->
		
		<!-- <view class="flex row-right mr40 balance">
			<view>可用余额</view>
			<text>￥500.23</text>
		</view> -->
		<!-- 头部盒子 -->
		
		<view class="boxmode mt54 mb54">- 充值方式 -</view>
		
		<view class="">
			<u-radio-group v-model="value"  wrap width='100%'>
					<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name"
						:disabled="item.disabled"
						:value=item.vlaue>
						<view class="flex col-center radiobox">
							<image :src="item.img" class="w44 h44 mr20"></image>
							{{item.name}}
						</view>
					</u-radio>
			</u-radio-group>
		</view>
		
		<view class=" ml56 h86 paybtn" @tap="submit">
			立即支付
		</view>
	</view>

	
	
</template>

<script>
	export default {
		data() {
			return {
				//输入的金额
				money:'',
				list: [{
						name: '支付宝',
						disabled: false,
						value:2,
						img:'/static/img/index/7pay-1.png'
					},
					{
						name: '微信',
						value:1,
						disabled: false,
						img:'/static/img/index/7pay-2-2.png'
					},
					// {
					// 	name: '中国邮政银行（****6969）',
					// 	disabled: false,
					// 	img:'/static/img/index/7支付-邮政.png'
					// },
					// {
					// 	name: '中国建设银行（****5693）',
					// 	disabled: false,
					// 	img:'/static/img/index/7支付-建设.png'
					// }
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '',
				rechargeList:[],
				money:0
			};
		},
		onShow() {
			this.recharge()
		},
		methods:{
			submit(){
				this.$api.rechagePay({money:this.money,type:this.type}).then(res => {
					if(res.code == 1){
						this.pay(res.data)
					}
				})
			},
			pay(orderInfo){
				let info = ''
				let orderinfo = ''
				if(this.type == 1){
					info = 'wxpay'
					orderinfo = JSON.parse(orderInfo)
				}else {
					info = 'alipay'
					orderinfo = orderInfo
				}
				uni.requestPayment({
				    provider: info,
				    orderInfo:orderinfo, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
				    success: function (res) {
						uni.navigateBack()
				        console.log('success:' + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log('fail:' + JSON.stringify(err));
				    }
				});
			},
			recharge(){
				this.$api.rechageList().then(res => {
					this.rechargeList = res.data
					this.money = this.rechargeList[0].price
				})
			},
			radioChange(e){
				if(e == '支付宝'){
					this.type = 2
				}else {
					this.type = 1
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
	.u-radio-group {
		width: 100%;
	}
	.headerbox-tit {
		font-size: 30rpx;
		color: #0C162E;
	}

	.selectbox {
		.selectbox-item {
			width: 30%;
			height: 68rpx;
			background: #E9F4FF;
			border-radius: 2rpx;
			text-align: center;
			line-height: 68rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #1385FF;
		}

		.active {
			background: #1385FF;
			color: #FFFFFF;
		}
	}
	.line {
		width: 100%;
		height: 2rpx;
		background: #D2DEEB;
	}
	.balance {
		font-size: 28rpx;
		font-weight: 500;
		color: #6D788B;
		text {
			color: #FD1D4D;
		}
	}
	.boxmode {
		text-align: center;
		font-weight: 500;
		color: #0C162E;
	}
	/deep/.u-radio {
		position: relative;
		border-bottom: 2rpx solid #D2DEEB;
		padding-bottom: 22rpx;
		margin-bottom: 50rpx;
	}
	/deep/.u-radio__icon-wrap {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	.paybtn {
		position: fixed;
		bottom: 30rpx;
		left: 0;	
		width: 85%;
		text-align: center;
		line-height: 86rpx;
		background: #1385FF;
		border-radius: 10rpx;
		color: #FFFFFF;
	}
</style>
